<script setup lang="ts">
  import HStatus from '@/components/common/status/HStatus.vue'
  import { useUserStore } from '@/store/modules/user'
  import { WarningFilled } from '@element-plus/icons-vue'

  const props = defineProps<{
    orderDetail: OrderDetail
    orderTotalFee: number
  }>()

  // 客户状态管理
  const userStore = useUserStore()
</script>

<template>
  <div>
    <div class="order_detail_header_status">
      <div class="order_number_module">
        <span>{{ props.orderDetail.orderNo }}</span>
        <span>{{ props.orderDetail.module }}</span>
      </div>

      <div class="status">
        <h-status v-if="props.orderDetail.status === 1" type="warning">待派单</h-status>
        <h-status v-if="props.orderDetail.status === 2" type="warning">待网点确认</h-status>
        <h-status v-if="props.orderDetail.status === 3" type="warning">处理中</h-status>
        <h-status v-if="props.orderDetail.status === 4" type="success">已完成</h-status>
        <h-status v-if="props.orderDetail.status === 5" type="info">已取消</h-status>
        <h-status v-if="props.orderDetail.reminder" type="error">
          已催单{{ props.orderDetail.reminderQty }}次
        </h-status>

        <template
          v-if="
            ![1, 2].includes(props.orderDetail.status) &&
            props.orderDetail.network &&
            props.orderDetail.network.includes('电匠院')
          "
        >
          <template v-if="props.orderDetail.thirdPushState">
            <h-status v-if="props.orderDetail.thirdPushErrorMsg" type="error">推送失败</h-status>
            <h-status v-else>推送成功</h-status>
          </template>
          <h-status v-else type="info">未推送</h-status>
        </template>
        <!--<HStatus v-if="props.orderDetail.repeatOrder" type="error">重单</HStatus>-->

        <template v-if="props.orderDetail.status === 4 && !userStore.isCurrentRoleNetwork">
          <h-status v-if="props.orderTotalFee === 0" type="info">无需收款</h-status>
          <template v-else>
            <h-status v-if="props.orderDetail.userPayment">已收款</h-status>
            <h-status v-else type="info">未收款</h-status>
          </template>
          <!-- <h-status v-if="props.orderTotalFee === 0" type="info">无需开票</h-status>
          <template v-else>
            <h-status v-if="props.orderDetail.openTicket">已开票</h-status>
            <h-status v-else type="info">未开票</h-status>
          </template> -->
          <h-status v-if="props.orderDetail.snCodeStatus === 1" type="warning"
            >条码待审核</h-status
          >
          <h-status v-if="props.orderDetail.snCodeStatus === 2">条码已审核</h-status>
          <h-status v-if="props.orderDetail.snCodeStatus === 3" type="error"
            >条码审核已驳回</h-status
          >
        </template>
        <template v-else>
          <h-status v-if="props.orderDetail.workSpareStatus === 1" type="warning">
            {{ props.orderDetail.checkType === 1 ? '待总部审核' : '待站长审核' }}
          </h-status>
          <h-status v-if="props.orderDetail.workSpareStatus === 2" type="success">
            审核通过
          </h-status>
          <h-status v-if="props.orderDetail.workSpareStatus === 3" type="warning">
            待发送报价单
          </h-status>
          <h-status v-if="props.orderDetail.workSpareStatus === 4" type="warning">
            待确认报价
          </h-status>
          <h-status v-if="props.orderDetail.workSpareStatus === 5" type="success">
            已同意报价
          </h-status>
          <h-status v-if="props.orderDetail.workSpareStatus === 6" type="warning">
            待领料
          </h-status>
          <h-status v-if="props.orderDetail.workSpareStatus === 7" type="success">
            报价已完成
          </h-status>
          <h-status v-if="props.orderDetail.workSpareStatus === 8" type="error">
            不同意报价
          </h-status>
          <h-status v-if="props.orderDetail.workSpareStatus === 9" type="error">
            审核驳回
          </h-status>
          <h-status v-if="props.orderDetail.workSpareStatus === 10" type="info"> 已撤回 </h-status>
          <h-status v-if="props.orderDetail.workSpareStatus === 11" type="info"> 已取消 </h-status>
        </template>
      </div>

      <!-- <HStatus v-if="props.orderDetail.status === 4"
        >在保{{ props.orderDetail.warrantyDay }}天</HStatus
      > -->

      <h-status
        v-if="props.orderDetail.status !== 4 && props.orderDetail.workLevel"
        type="info"
        color="#333"
      >
        {{ props.orderDetail.workLevel }}
      </h-status>

      <h-status v-if="props.orderDetail.status === 4">
        完成时间：{{ props.orderDetail.endTime }}
      </h-status>

      <!-- <HStatus v-if="props.orderDetail.allInclusiveFee" type="info" color="#333">
        费用全包
      </HStatus> -->

      <h-status
        v-if="props.orderDetail.currentUseTime && props.orderDetail.status !== 4"
        type="info"
        color="#333"
      >
        当前耗时：{{ props.orderDetail.currentUseTime }}
      </h-status>

      <h-status v-if="props.orderDetail.totalUseTime" type="info" color="#333">
        总耗时：{{ props.orderDetail.totalUseTime }}
      </h-status>

      <h-status v-if="props.orderDetail.nodeTimeout" type="error">
        <el-icon :size="14">
          <WarningFilled />
        </el-icon>
        <div>
          <!-- 节点超时类型 -->
          <span v-if="Number(props.orderDetail.nodeOverTimetype) === 2">未派单</span>
          <span v-else-if="Number(props.orderDetail.nodeOverTimetype) === 3">网点未接单</span>
          <span v-else-if="Number(props.orderDetail.nodeOverTimetype) === 4">工程师未接单</span>
          <span v-else-if="Number(props.orderDetail.nodeOverTimetype) === 5">工程师未拨打电话</span>
          <span v-else-if="Number(props.orderDetail.nodeOverTimetype) === 6">工程师未预约</span>
          <span v-else>工程师未签到</span>
          <span>已超时：</span>

          <!-- 节点超时时间 -->
          <span>{{ props.orderDetail.nodeOverTime }}</span>
        </div>
      </h-status>
      <h-status v-if="orderDetail.suspend" type="error">挂起中</h-status>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .order_detail_header_status {
    display: flex;
    gap: 5px;
    align-items: center;

    .order_number_module {
      font-weight: bold;
      font-size: 14px;
      display: flex;
      column-gap: 5px;
    }

    .status {
      display: flex;
      gap: 5px;
    }
  }
</style>
